<template>
  <div class="template slide-container">
    <div class="title">
      轮播
      <span class="desc">最多{{maxPics}}张图片</span>
    </div>
    <div class="content">
      <panel-common />
      <div class="block">
        <div class="dt">内容</div>
        <div class="list">
          <ul class="grid-content-ul">
            <li v-for="(item, index) of pics" :key="index" @click="editHandle(item, index)" class="content-li">
              <el-image :src="item.url" fit="contain">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <div class="delete" @click.stop="deleteElement(item, index)">
                <i class="el-icon-delete" />
              </div>
            </li>
            <li class="content-li">
              <upload @on-success="imgUpdateSuccessHandle">
                <el-button class="button-upload" icon="el-icon-plus" plain></el-button>
              </upload>
            </li>
          </ul>
        </div>
        <div class="tips">请使用<em>宽750像素</em>-<em>高200~950像素</em>内的<em>jpg</em>或<em>png</em>透明图片</div>
        <!-- <div class="list">
          <el-upload
            action="#"
            :file-list="pics"
            list-type="picture-card"
            :auto-upload="false"
            :multiple="true"
            :limit="maxPics"
            :on-change="uploadChange"
            :on-preview="uploadPreview"
            :on-remove="uploadRemove"
          >
            <i class="el-icon-plus"></i>
            <div class="slide-item" slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" :alt="file.name"
              >
              <a class="el-upload-list__item-name"><i class="el-icon-document"></i>{{file.name}}</a>
              <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
              <i class="el-icon-close"></i>
              <i class="el-icon-close-tip">按 delete 键可删除</i>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="uploadPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="true"
                  class="el-upload-list__item-delete"
                  @click="uploadRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div> -->
      </div>
      <div class="block" v-if="currentPic && currentPic.url">
        <div class="dt">编辑{{currentPicIndex !== null ? `(第${currentPicIndex + 1}张)` : ''}}</div>
        <div class="dd">
          <el-form ref="form" :model="form" label-width="80px">
            <!-- <el-form-item label="开始时间">
              <el-date-picker v-model="form.startDate" value-format="yyyy-MM-dd" />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker v-model="form.endDate" value-format="yyyy-MM-dd" />
            </el-form-item> -->
            <el-form-item label="跳转类型">
              <el-select v-model="form.targetType" placeholder="请选择跳转类型">
                <el-option label="不跳转" value="0" />
                <el-option label="商品" value="1" />
                <el-option label="活动" value="2" />
                <el-option label="资讯" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="跳转编号">
              <el-input v-model="form.targetParams" />
            </el-form-item>
          </el-form>
        </div>
        <div class="submit">
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { uuid } from '../../../../common/'
import { STORE_NAMESPACE } from '../../../../config'
import Upload from '../../../upload'
import PanelCommon from '../common'
export default {
  name: 'PanelSlide',
  components: {
    Upload,
    PanelCommon
  },
  data () {
    return {
      maxPics: 5, // 最多5张图
      selected: null,
      currentPic: {}, // 当前选中图片
      currentPicIndex: null, // 当前选中项的下标
      form: { // 当前选中图片的详细信息
        // startData: '',
        // endDate: '',
        targetType: '0', // 字符串 '0' 不跳转
        targetParams: ''
      },
    }
  },
  computed: {
    ...mapState({
      current: state => state[STORE_NAMESPACE].current,
      shopId: state => state[STORE_NAMESPACE].shopId
    }),
    pics () {
      return this.current.elements
    }
  },
  methods: {
    editHandle (item, index) {
      this.currentPic = { ...item }
      this.currentPicIndex = index
    },
    deleteElement (item, index) {
      // const index = this.findPicsIndex(item)
      this.$store.dispatch(`${STORE_NAMESPACE}/setElement`, {
        type: 'delete',
        index
      }).then(() => {
        this.currentPic = {}
        this.currentPicIndex = null
      })
    },
    imgUpdateSuccessHandle (file) {
      console.log('文件修改: ', file)
      this.$store.dispatch(`${STORE_NAMESPACE}/setElement`, {
        type: 'push',
        value: {
          name: file.name,
          url: file.url,
          uuid: uuid(this.shopId, 'image'), // 这里的uid会作为图片的唯一值
          width: file.width,
          height: file.height,
          ...this.form
        }
      })
    },
    // 确定
    onSubmit () {
      // if (this.startData > this.endDate) {
      //   return this.$message({
      //     type: 'error',
      //     message: '开始时间不能小于结束时间'
      //   })
      // }
      this.$store.dispatch(`${STORE_NAMESPACE}/setElement`, {
        type: 'update',
        index: this.currentPicIndex,
        value: {
          ...this.currentPic,
          ...this.form
        }
      })
    },
    // 查找pics下标
    findPicsIndex (file) {
      return this.pics.findIndex(item => item.uuid === file.uuid)
    }
  }
}
</script>

<style lang="less" scoped>
.slide-container {
  .slide-item {
    width: 100%;
    height: 100%;
  }
  /* 覆盖element样式 */
  ::v-deep .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 75px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
  }
  ::v-deep .el-input {
    width: 220px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    border: 1px solid #fff;
  }

  .grid-content-ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 80px) !important;
    grid-template-rows: 80px !important;
    margin: auto !important;
    grid-gap: 5px 5px !important;
  }
  .content-li {
    position: relative;
    background: #fbfbfb;
    border: 1px dashed #c0ccda;
    box-sizing: border-box;
    border-radius: 6px;
    &:hover {
      .delete {
        display: flex;
      }
    }
    .el-button {
      border: unset;
      width: 100%;
      height: 100%;
    }
  }
  .delete {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: pointer;
    i {
      font-size: 17px;
      color: #f4516c;
    }
  }
}
</style>